<template>
  <!-- <div class="header-image">
    <div class="tableCell">
      <div class="name_role_wrap">{{name}}</div>
      <div class="name_role_wrap"> -->
  <el-dropdown @command="commandFunc" class="header-image-dropdown">
    <span>
      <div class="header-image">
        <div class="tableCell">
          <div class="name_role_wrap">{{name}}</div>
          <div class="name_role_wrap role_name_wrap">
            {{role_name}}
          </div>
        </div>
        <div class="tableCell image-table">
          <img
            :src="'./public/img/page-user.png'"
            alt=""
            class="header-img"
          >
        </div>
      </div>
      <i class="el-icon-arrow-down el-icon--right"></i>
    </span>
    <el-dropdown-menu slot="dropdown">
      <template v-for="(item, index) in roles">
        <el-dropdown-item :key="index" :command="item">
          <span :class="{'active': role_id === item.id}">{{item.roleName}}</span>
        </el-dropdown-item>
      </template>
    </el-dropdown-menu>
  </el-dropdown>
  <!-- </div>
    </div>
    <div class="tableCell image-table" >
      <img :src="'./public/img/page-user.png'" alt="" class="header-img">
    </div>
  </div> -->
</template>
<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapGetters(["name", "roles", "role_id"]),
    role_name() {
      for (let item of this.roles) {
        if (item.id === this.role_id) {
          return item.roleName;
        }
      }
    }
  },
  methods: {
    /**
     * @name commandFunc
     * @description
     * @author cjs1992
     * @date 2019-12-02 14:47:37
     */
    async commandFunc(val) {
      const { id: roleId } = val;
      if (roleId === this.role_id) {
        return;
      }
      const res = await this.$store.dispatch('user/changeMenu', {
        roleId
      });
      this.$message({
        type: 'success',
        message: '切换角色成功!'
      });
      window.location.reload();
    }
  }
};
</script>
<style lang="scss" scoped>
.header-image {
  height: 100%;
  display: inline-table;
  // vertical-align: top;
  vertical-align: middle;
  // display: table;
  .tableCell {
    display: table-cell;
    vertical-align: middle;
    color: #fff;
    &.image-table {
      padding-left: 8px;
      line-height: 0;
    }
  }
  .header-img {
    width: 30px;
    height: 30px;
  }
}
.name_role_wrap {
  line-height: 20px;
  text-align: right;
  .el-dropdown {
    color: #fff;
  }
}
.header-image-dropdown {
  margin-right: 10px;
  vertical-align: top;
  .el-icon--right {
    margin-left: 0;
    &:before {
      content: "\e790";
      display: inline-block;
      font-size: 14px;
      color: rgba(255, 255, 255, 0.8);
      font-family: "element-icons" !important;
      speak: none;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
      vertical-align: baseline;
      display: inline-block;
      -webkit-font-smoothing: antialiased;
    }
  }
}
.role_name_wrap {
  font-size: 12px;
}
</style>
